<template>
  <div>
    <title-panel />

    <van-form
      input-align="right"
      error-message-align="right"
      :show-error-message="false"
      show-error
      scroll-to-error
      validate-first
      @failed="onFailed"
      @submit="onSubmit"
    >
      <van-cell style="padding: 0">
        <van-field
          v-model="obj.earLabelNo"
          autocomplete="off"
          class="fromInput"
          name="earLabelNo"
          label="耳标号"
          required
          label-width="60%"
          placeholder="请选择"
          is-link
          readonly
          input-align="right"
          :rules="[{ required: true, message: '请选择耳标号' }]"
          @click="chooseEarLabel"
        />
        <van-button native-type="button" plain color="#37B5B5" class="addbtn" @click="scanClick()" type="primary"
          >扫一扫</van-button
        >
      </van-cell>

      <van-field readonly v-model="obj.preventionNo" name="obj" label="畜禽标识编号" required input-align="right" />

      <van-field
        readonly
        v-model="obj.treatDate"
        name="treatDate"
        label="诊疗日期"
        is-link
        placeholder="请选择时间"
        input-align="right"
        autocomplete="off"
        required
        @click="showDate = true"
        :rules="[{ required: true, message: '请选择诊疗日期' }]"
      />
      <van-field
        v-model="obj.diseaseTypeName"
        name="diseaseTypeName"
        label="疫病类型"
        is-link
        required
        autocomplete="off"
        placeholder="请选择疫病类型"
        input-align="right"
        @click="showType = true"
        readonly
        :rules="[{ required: true, message: '请选择疫病类型' }]"
      />

      <van-field
        v-model="obj.diseaseName"
        name="diseaseName"
        label="疫病名称"
        is-link
        required
        autocomplete="off"
        placeholder="请选择疫病名称"
        input-align="right"
        @click="clickdiseaseName()"
        readonly
        :rules="[{ required: true, message: '请选择疫病名称' }]"
      />
      <!-- <van-field
        v-model="obj.diseaseName"
        name="diseaseName"
        label="疫病名称"
        autocomplete="off"
        required
        placeholder="请输入疫病名称"
        input-align="right"
        :rules="[{ required: true, message: '请输入疫病名称' }]"
      /> -->
      <van-field
        v-model="obj.diseaseDescribe"
        rows="1"
        autosize
        label="病症描述"
        type="textarea"
        placeholder="请输入病症描述"
      />
      <van-field
        v-model="obj.drugUseName"
        name="drugUseName"
        label="使用药品"
        required
        placeholder="请选择药品"
        is-link
        autocomplete="off"
        input-align="right"
        readonly
        :rules="[{ required: true, message: '请选择药品' }]"
        @click="goSelect"
      />
      <van-field
        v-model="obj.drugWayName"
        name="drugWayName"
        label="用药方法"
        required
        autocomplete="off"
        placeholder="请选择用药方法"
        input-align="right"
        is-link
        readonly
        :rules="[{ required: true, message: '请选择用药方法' }]"
        @click="showMethod = true"
      />
      <van-field
        v-model="obj.drugUseDose"
        name="drugUseDose"
        label="使用剂量"
        required
        autocomplete="off"
        placeholder="请输入使用剂量"
        input-align="right"
        :rules="[{ required: true, message: '请输入使用剂量' }]"
      />
      <van-field
        v-model="obj.drugUnitName"
        name="drugUnitName"
        label="单位"
        required
        is-link
        autocomplete="off"
        placeholder="请选择单位"
        input-align="right"
        :rules="[{ required: true, message: '请选择单位' }]"
        readonly
        @click="showUnit = true"
      />
      <van-field
        :border="false"
        v-model="obj.abandonNum"
        name="abandonNum"
        label="用药弃奶天数"
        autocomplete="off"
        placeholder="请输入"
        type="number"
        input-align="right"
      />
      <div class="spacing" />
      <div class="add-btn">
        <van-button
          block
          type="info"
          color="#37B5B5"
          style="width: 85%; margin: auto; margin-top: 50px"
          native-type="submit"
          size="large"
          :loading="loading"
          loading-text="提交中..."
          >保存</van-button
        >
      </div>
    </van-form>
    <!-- 诊疗日期 -->
    <van-popup v-model="showDate" position="bottom">
      <van-datetime-picker type="date" v-model="currentDate" @confirm="handleConfirm" @cancel="showDate = false" />
    </van-popup>
    <!-- 疫病类型 -->
    <van-popup v-model="showType" position="bottom">
      <van-picker
        title="选择类型"
        show-toolbar
        :columns="typeList"
        value-key="name"
        @confirm="typeConfirm"
        @cancel="showType = false"
      />
    </van-popup>
    <!-- 选择名称 -->
    <van-popup v-model="showType1" position="bottom">
      <van-picker
        title="选择名称"
        show-toolbar
        :columns="typeList1"
        value-key="diseasePestName"
        @confirm="typeConfirm1"
        @cancel="showType1 = false"
      />
    </van-popup>

    <!-- 单位选择 -->
    <van-popup v-model="showUnit" position="bottom">
      <van-picker
        title="选择单位"
        show-toolbar
        :columns="unitList"
        value-key="name"
        @confirm="unitConfirm"
        @cancel="showUnit = false"
      />
    </van-popup>
    <!-- 方法选择 -->
    <van-popup v-model="showMethod" position="bottom">
      <van-picker
        title="选择方法"
        show-toolbar
        :columns="methodList"
        value-key="name"
        @confirm="methodConfirm"
        @cancel="showMethod = false"
      />
    </van-popup>
  </div>
</template>
<script>
import { dictionaryList, diseaseTreatRecordSave } from '@/api/record'

import {
  Form,
  Field,
  Calendar,
  RadioGroup,
  Radio,
  Dialog,
  Toast,
  DatetimePicker,
  Picker,
  Button,
  Icon,
  Popup,
  Cell,
  Checkbox,
  CheckboxGroup,
  CellGroup
} from 'vant'
import TitlePanel from '@/components/titlePanel'
import { getValue, clearValue, setValue } from '@/utils/auth'
import moment from 'moment'
import { getHandle, postHandle } from '../../api'
import dayjs from 'dayjs'
export default {
  components: {
    TitlePanel,
    [Form.name]: Form,
    [Field.name]: Field,
    [Calendar.name]: Calendar,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Cell.name]: Cell,
    [Dialog.Component.name]: Dialog.Component,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [CellGroup.name]: CellGroup
  },
  data() {
    return {
      showDate: false, // 日期展示
      showType: false, // 疫病类型
      showType1: false, // 疫病名称

      showUnit: false, // 单位展示
      showMethod: false, // 方法展示
      loading: false,
      isDisabled: false,
      currentDate: new Date(), // 今天日期
      obj: {
        treatDate: dayjs(new Date()).format('YYYY-MM-DD'), // 诊疗日期
        earLabelNo: null, // 耳标号
        earLabelNoLength: null, // 耳标号数量
        diseaseTypeCode: null, // 疫病类型(code)
        diseaseTypeName: null, // 疫病类型（name）
        diseaseName: null, // 疫病名称
        diseaseDescribe: null, // 病症描述
        drugUseName: null, // 使用药品
        drugWayCode: null, // 用药方法(code)
        drugWayName: null, // 用药方法（name）
        drugUseDose: null, // 使用剂量
        drugUnitCode: null, // 单位(code)
        drugUnitName: null, // 单位(name0)
        abandonNum: null, // 用药弃奶天数
        houseInfoId: null, // 舍id
        individualInfoId: null // 个体id
      },
      typeList: [], // 疫病类型
      typeList1: [], // 疫病名称

      methodList: [], // 用药方法
      unitList: [], // 单位数组
      type: null,
      earObj: {}
    }
  },
  async mounted() {
    await this.loadZidian()

    if (getValue('fzmHourseId')) {
      this.obj.houseInfoId = getValue('fzmHourseId')
    }
    this.$bridge.register('backScanData', data => {
      if (JSON.parse(data).individualId) {
        let obj = {
          earLabelNo: JSON.parse(data).earLabelNo,
          id: JSON.parse(data).individualId,
          preventionNo: JSON.parse(data).preventionNo
        }
        setValue('earTag2d', JSON.stringify(obj))

        // setValue('newDisease', JSON.stringify(obj))
        this.obj.individualInfoId = JSON.parse(data).individualId
        this.obj.earLabelNo = JSON.parse(data).earLabelNo
        this.obj.preventionNo = JSON.parse(data).preventionNo

        // clearValue('earTag2d')
      } else {
        Toast('羊只信息未录入')
        return
      }
    })

    this.$bridge.register('refresh', data => {
      if (getValue('earTag2d')) {
        const earTag2d = JSON.parse(getValue('earTag2d'))
        this.obj.earLabelNo = earTag2d.earLabelNo
        this.obj.individualInfoId = earTag2d.id
        this.obj.preventionNo = earTag2d.preventionNo
      } else if (getValue('newDisease')) {
        const newDisease = JSON.parse(getValue('newDisease'))
        this.obj.earLabelNo = newDisease.earLabelNo
        this.obj.individualInfoId = newDisease.id
      }
      if (getValue('ypobjA')) {
        const productName = JSON.parse(getValue('ypobjA'))
        this.obj.drugUseName = productName.name
        this.obj.drugUseId = productName.id
      }
    })
  },
  methods: {
    clickdiseaseName() {
      if (this.obj.diseaseTypeCode != null) {
        getHandle('/agri/api/common/diseasePest/queryList', {
          typeCode: this.obj.diseaseTypeCode,
          dataType: 'YB'
        }).then(res => {
          this.typeList1 = res.data.rows

          if (this.typeList1.length > 0) {
            this.showType1 = true
          } else {
            Toast('无数据')
          }
        })
      } else {
        Toast('请先选择疫病类型')
      }
    },

    scanClick() {
      this.$bridge.call('base.scanOneScan')
    },

    onFailed(errorInfo) {
      Toast(errorInfo.errors[0].message)
    },
    // 获取字典
    async loadZidian() {
      // 获取疫病类型
      await dictionaryList('T000010_EPIDEMIC_TYPE').then(res => {
        if (res.status === 0) {
          this.typeList = res.data.rows
        }
      })
      // 用药方法
      await dictionaryList('T000010_DRUG_WAY').then(res => {
        if (res.status === 0) {
          this.methodList = res.data.rows
        }
      })
      // 单位
      await dictionaryList('T000010_UNITS_CODE').then(res => {
        if (res.status === 0) {
          this.unitList = res.data.rows
        }
      })
    },
    // 选择药品
    goSelect() {
      setValue('swFlag', 'swAdd')
      setValue('productId', this.obj.drugUseId)
      this.$bridge.call('selectProductsFzm2')
    },
    onSubmit() {
      this.loading = true
      Toast.loading({
        forbidClick: true,
        duration: 0
      })
      diseaseTreatRecordSave(this.obj).then(res => {
        if (res.status == 0) {
          Toast.success('新增成功')
          clearValue('earTag2d')
          clearValue('swFlag')
          clearValue('productId')
          clearValue('ypobjA')
          clearValue('newDisease')
          setTimeout(() => {
            this.$bridge.call('base.closePage')
          }, 1000)
        } else {
          Toast(res.msg)
        }

        this.loading = false
      })
    },
    // 选择耳标号
    chooseEarLabel() {
      this.$bridge.call('addCheckEarTag2d')
    },
    // 选择日期1
    handleConfirm(val) {
      this.obj.treatDate = moment(val).format('YYYY-MM-DD')
      this.showDate = false
    },
    // 确认 - 疫病类型
    typeConfirm(val) {
      this.obj.diseaseTypeCode = val.code
      this.obj.diseaseTypeName = val.name
      this.showType = false
    },
    // 确认 - 疫病名称
    typeConfirm1(val) {
      this.obj.diseaseName = val.diseasePestName
      this.showType1 = false
    },
    // 确认-方法
    methodConfirm(val) {
      this.obj.drugWayCode = val.code
      this.obj.drugWayName = val.name
      this.showMethod = false
    },
    // 确认-单位
    unitConfirm(val) {
      this.obj.drugUnitCode = val.code
      this.obj.drugUnitName = val.name
      this.showUnit = false
    }
  }
}
</script>
<style lang="scss" scoped>
.addbtn {
  width: 50px;
  height: 24px;
  font-size: 13px;
  padding: 0;
  margin-right: 13px;
  z-index: 10;
  float: right;
  margin-top: -38px;
}
.places {
  padding: 0 16px;
  box-sizing: border-box;
  .place_item {
    border-bottom: 1px solid #e9e9e9;
    padding: 15px 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.head {
  display: flex;
  padding: 15px 16px;
  box-sizing: border-box;
  justify-content: space-between;
  font-size: 15px;
  border-bottom: 1px solid #e9e9e9;
  span {
    color: #409eff;
  }
  p {
    color: #666666;
  }
}
.tip {
  padding-top: 15px;
  color: #999999;
  font-size: 12px;
  line-height: 16px;
  margin: auto;
}
.btn {
  width: 80%;
  margin: 50px auto 0 auto;
}
.btn > div {
  height: 50px;
  background: #2871fe;
  border-radius: 4px;
  text-align: center;
  line-height: 50px;
  color: #ffffff;
  font-size: 17px;
}
.btn .cancel {
  margin-top: 20px;
  background: rgba(40, 113, 254, 0.1);
  border: 1px solid #2871fe;
  color: #2871fe;
}
::v-deep .van-field__label {
  width: 6em;
}
.bthStyle {
  width: 56px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid #2871fe;
}
.active {
  background-color: #fff;
  color: #2871fe;
}
.add-btn {
  padding-bottom: 20px;
}
.addbtn {
  width: 50px;
  height: 24px;
  font-size: 13px;
  padding: 0;
  margin-right: 13px;
  z-index: 10;
  float: right;
  margin-top: -38px;
}
.btnfrom {
  padding: 14px 0;
}
.fromInput {
  width: 86%;
}
</style>
